<template>
<div>
  <swiper class="home-swiper" ref="swiper">
    <swiper-item v-for="(item, index) in banners" :key="index">
      <a href="javascript:void(0)" >
        <img :src="item.img" alt="">
      </a>
    </swiper-item>
  </swiper>
  <div class="click-laft" @click="topre">
    <img src="~assets/img/banner/arrow-left.svg" alt="">
  </div>
  <div class="click-right" @click="tonext">
    <img src="~assets/img/banner/arrow-right.svg" alt="">
  </div>
</div>
</template>

<script>
import {Swiper, SwiperItem} from 'components/common/swiper'

export default{
  name: 'homeswiper',
  components: {
    Swiper,
    SwiperItem
  },
  props: {
    banners: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    topre() {
      this.$refs.swiper.previous()
    },
    tonext() {
      this.$refs.swiper.next()
    }
  }
}
</script>

<style scoped>
.home-swiper{
  border-radius: 8px;
}
.home-swiper img{
  vertical-align: middle;
  cursor: default;
}
.click-laft, .click-right{
  position: absolute;
  top: 100px;
  height: 100px;
  line-height: 100px;
  cursor: pointer;
  border-radius: 30px;
}
.click-laft img, .click-right img{
  padding-top: 14px;
}
.click-laft{
  left: 10px;
}
.click-right{
  right: 10px;
}
.click-laft:hover, .click-right:hover{
  background-color: rgba(189, 187, 187, 0.5);
}
</style>
